<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>策略模式</title>
  </head>
  <style>
    #stateList li {
      display: flex;
      justify-content: space-between;
    }

    .state_pass {
      color: green;
    }

    .state_inReview {
      color: orange;
    }

    .state_rejected {
      color: red;
    }
  </style>
  <body>
    <ul id="stateList"></ul>
    <script>
      const data = [
        {
          text: "十万个为什么",
          state: "pass",
        },
        {
          text: "红楼梦",
          state: "inReview",
        },
        {
          text: "大头儿子小头爸爸",
          state: "rejected",
        },
      ];

      // 使用策略根据数据决定显示的文本/颜色
      const stateMap = {
        pass: {
          displayValue: "通过",
          className: "state_pass",
        },
        inReview: {
          displayValue: "审核中",
          className: "state_inReview",
        },
        rejected: {
          displayValue: "驳回",
          className: "state_rejected",
        },
      };

      function renderList() {
        const container = document.querySelector("#stateList");
        container.innerHTML = data.map(
          (d) => `
            <li ><span>${d.text}</span><span class=${
            stateMap[d.state].className
          }>${stateMap[d.state].displayValue}</span></li>
        `
        );
      }

      renderList();
    </script>
  </body>
</html>
